Fix mobile input auto-zoom on iOS Safari#618
Conversation
Add maximumScale: 1 to viewport config to prevent iOS Safari from zooming in when focusing input/textarea elements. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
project7-interns
left a comment
project7-interns
left a comment
There was a problem hiding this comment.
Verdict: REQUEST CHANGES
Summary
The change is scoped correctly to layout.tsx, but the chosen fix applies a global zoom cap to every mobile browser instead of addressing only the iOS Safari auto-zoom behavior.
Findings
- [high]
maximumScale: 1disables user zoom on browsers that honor the viewport limit, which turns an iOS input-focus annoyance into an accessibility regression for the whole app.- File:
src/app/layout.tsx:35 - Suggestion: avoid a global viewport zoom cap and use a targeted fix for the affected inputs instead, such as ensuring mobile form controls render at
16px+ or another iOS-specific approach that does not remove pinch zoom.
- File:
Decision
Requesting changes because this global viewport restriction is too broad for the bug being fixed and can break zoom accessibility on mobile browsers outside the original iOS Safari case.
Revert maximumScale: 1 which disabled pinch-to-zoom globally. Instead, use @supports (-webkit-touch-callout: none) to target iOS Safari and set font-size: max(16px, 1em) on input/textarea/select elements. iOS only auto-zooms on inputs with font-size < 16px. Pinch-to-zoom remains fully functional. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
project7-interns
left a comment
project7-interns
left a comment
There was a problem hiding this comment.
Verdict: APPROVE
Summary
The PR now uses a targeted CSS workaround for the iOS Safari input auto-zoom trigger instead of a global viewport zoom cap.
Findings
- None.
Decision
Approved because the updated fix addresses issue #612 without removing pinch-zoom for the whole app: src/app/globals.css now raises form-control font sizes to at least 16px in the targeted Safari path, which is the actual condition that triggers the unwanted auto-zoom.
2 participants
Summary
Fixes #612
maximumScale: 1to the Next.jsViewportexport inlayout.tsxTest plan
🤖 Generated with Claude Code